<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>测试layui弹出层</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <!-- layer依赖jquery1.8以上-->
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>
    <script src="../zujian/layer/layer.js"></script>
    <script src="../zujian/layui/layui.js"></script>
    <!-- 自定义的弹出层皮肤 -->
    <link rel="stylesheet" href="../zujian/layer/skin/uskin/style.css">


</head>
<body>

            <a class="layui-btn layui-btn-primary" href="javascript:;" id="test1">初体验</a>
            <a class="layui-btn " href="javascript:;" id="test2">第三方扩展皮肤</a>
            <a class="layui-btn " href="javascript:;" id="test3">询问层</a>
            <a class="layui-btn " href="javascript:;" id="test301">询问层301</a>
            <a class="layui-btn " href="javascript:;" id="tishiceng">提示层</a>
            <a class="layui-btn " href="javascript:;" id="duogongnengtishiceng">多功能提示层</a>
            <a class="layui-btn " href="javascript:;" id="深蓝墨绿">墨绿深蓝风</a>
            <a class="layui-btn " href="javascript:;" id="捕获页" style="_display:none;">捕获页</a>
            <a class="layui-btn " href="javascript:;" onclick="页面层()">页面层</a>
            <a class="layui-btn " href="javascript:;" onclick="自定页()">自定页</a>
            <a class="layui-btn " href="javascript:;" onmouseover="tipsceng(this)">tips层</a>
            <a class="layui-btn " href="javascript:;" onclick="iframe层()">iframe层</a>
            <a class="layui-btn " href="javascript:;" onclick="iframe窗()">iframe窗</a>
            <a class="layui-btn " href="javascript:;" onclick="加载层()">加载层</a>
            <a class="layui-btn " href="javascript:;" onclick="loadding层()">loading层</a>
            <a class="layui-btn " href="javascript:;" id="小tipsId" onclick="小tips()">小tips</a>
            <a class="layui-btn " href="javascript:;" onclick="prompt提示层()">prompt层</a>
            <a class="layui-btn " href="javascript:;" onclick="tab层()">tab层</a>
            <a class="layui-btn " href="javascript:;" onclick="相册层()">相册层</a>
            <a class="layui-btn " href="http://www.layui.com/demo/layim.html" target="_blank">WebIM</a>
           <!-- 相册层页面直接显示 -->
            <br/><br/>相册层页面直接显示,点击后相框显示<br/>
            <div id="layer-photos-demo001" class="layer-photos-demo">
                <img layer-pid="图片id，可以不写001" layer-src="../pic/chuiniubi.jpg" src="../pic/chuiniubi.jpg" style="width:30px;height: 30px" alt="图片名01">
                <img layer-pid="图片id，可以不写002" layer-src="../pic/hashiqi.jpg" src="../pic/hashiqi.jpg" style="width:30px;height: 30px"  alt="图片名02">
            </div>

            <script>
                //调用示例
                layer.photos({
                    closeBtn:true,
                    photos: '#layer-photos-demo001'
                    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            </script>
            <br/><br/><br/>
<!--
使用场景
由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景	用前准备	调用方式
1. 作为独立组件使用	如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。	通过script标签引入layer.js后，直接用即可。 参考：快速上手
2. layui 模块化使用	如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js	通过layui.use('layer', callback)加载模块
-->
<script type="text/javascript">

    //页面一打开就执行弹层
    // layer.ready(function(){
    //     layer.msg('很高兴一开场就见到你');
    // });

    //弹出一个提示层
    $('#test1').on('click', function () {
        layer.alert('初体验');
    });
    //弹出一个自定义(包括皮肤)提示层
    $('#test2').on('click', function () {
        //第三方扩展皮肤 是内容
        layer.alert('第三方扩展皮肤', {
            content:'曹曹',//这个内容会覆盖上面的内容
            //最下面点击确定按钮上显示的字  不写默认确定
            btn:'靠',
            //最上面标题 不写默认  信息
            title:'操',
            //icon为0是圆圈感叹号图标//1是圆圈对号//2是圆圈一个叉//3是圆圈问号//4是圆圈锁//5是表情不开心//6是表情开心
            //7(包括)到15(包括)、17以及以后跟0一样是圆圈感叹号//16是加载样式的转圈
            //类型：Number，默认：-1（信息框）/0（加载层）
            // 信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：
            icon: 16,
            // 来自 <link rel="stylesheet" href="../zujian/layer/skin/uskin/style.css">
            skin: 'demo-class'
            //skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
        })
    });
    //询问框
    $('#test3').on('click', function () {
        //询问框
        layer.confirm('您是如何看待前端开发？', {
            //第一个按钮对应第一个function//第二个按钮对应第二个function
            //这里只能有2个按钮,多个按钮操作看下面那个
            btn: ['重要','奇葩'] //按钮
            }, function(){
                layer.msg('的确很重要', {icon: 1});
            }, function(){
                layer.msg('也可以这样', {
                    icon:6,
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了']
                });
            }
        );
    });
    //多按钮询问框
    $('#test301').on('click', function () {
        //询问框301
        layer.open({
            content: 'test询问框301多按钮'
            //后面可以跟很多按钮
            ,btn: ['按钮一', '按钮二', '按钮三','按钮4']
            //按钮1对应yes
            ,yes: function(index, layero){
                //按钮【按钮一】的回调
                layer.alert('按钮一');
            }
            ,btn2: function(index, layero){
                //按钮【按钮二】的回调
                layer.alert('按钮二');
                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,btn3: function(index, layero){
                //按钮【按钮三】的回调
                layer.alert('按钮三');
                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,btn4: function(index, layero){
                //按钮【按钮4】的回调
                layer.alert('按钮4');
                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,cancel: function(){
                //右上角关闭回调

                //return false; //开启该代码可禁止点击该按钮关闭
            }
        });
    });
    //提示层
    $('#tishiceng').on('click',function () {
        //提示层
        layer.msg('玩命提示中');
    })
    $('#duogongnengtishiceng').on('click',function () {
        layer.msg('多功能提示层玩命提示中', {
            //icon为0是圆圈感叹号图标//1是圆圈对号//2是圆圈一个叉//3是圆圈问号//4是圆圈锁//5是表情不开心//6是表情开心
            //7(包括)到15(包括)、17以及以后跟0一样是圆圈感叹号//16是加载样式的转圈
            icon: 1,
            time: 1500 //2秒关闭（如果不配置，默认是3秒）
        }, function(){
            //do something
            alert('多功能提示层函数001在上面提示完就执行')
        });
    })
    $('#深蓝墨绿').on('click',function () {
        layer.alert('墨绿风格，点击确认看深蓝', {
            skin: 'layui-layer-molv' //样式类名
            ,closeBtn: 0//为0的时候没有关闭的叉按钮
        }, function(){
            layer.alert('偶吧深蓝style', {
                skin: 'layui-layer-lan'
                ,closeBtn: 1//为1的时候有关闭的叉按钮
                ,anim: 6 //动画类型//就是弹出层弹出的动画类型//总共有6种
            });
        });
    })
    //捕获页其实捕获了整个标签
    $('#捕获页').on('click',function () {
        layer.open({
            type: 1,
            shade: false,
            title: false, //不显示标题
            //content可以直接捕获一个标签并实现他的功能,比如下面,也可以直接填写文字,捕获的标签还是按html功能
            content: $('#test2'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){
                layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 1500, icon:6});
            }
        });
    })
    //页面层
    function  页面层() {
        //页面层 //icon为0是圆圈感叹号图标//1是圆圈对号//2是圆圈一个叉//3是圆圈问号//4是圆圈锁//5是表情不开心//6是表情开心
        //7(包括)到15(包括)、17以及以后跟0一样是圆圈感叹号//16是加载样式的转圈
        layer.open({
            //icon:1,
            closeBtn: 1,//为0的时候没有关闭的叉按钮
            type:0,//0是带确定的,1是不带确定的
            skin:'layui-layer-rim', //加上边框
            area:['420px', '240px'], //宽高
            content:'html内容'
        });
    }
    //自定页
    function 自定页() {
        //自定页
        layer.open({
            area:['420px', '240px'], //宽高
            // btn:'确定',这个跟type功能有点交集
            type: 0,//0是带确定的,1是不带确定的
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 1, //0不显示关闭按钮
            anim: 1,//动画类型
            shadeClose: true, //开启遮罩关闭
            content: '内容',
            cancel:function(){
                layer.msg('自定页点击叉关闭后调取的函数。');
            },
            //success会在第一时间弹出层之前调取,这里不用
            // success:function () {
            //     //注意这个早于弹出层 ,并不是我想要的弹出层点击确定调取的,而是点击该按钮第一时刻调取的
            //     layer.msg('自定页点击确定闭后调取的函数。');
            // },
            yes:function () {
                layer.msg('点击确认后调取');
            }
        });
    }

//     layer.tips(content, follow, options) - tips层
//     {
//         content:tooltip内容可以是str，也可以是html代码
//         follow:依附的元素，一般用id表示
//         如果依附的元素是自己直接用this即可，如果是在其他元素的事件（比如点击）里面，记得更改this指向。
// options:tips的配置型[tips位置：1上；2右；3下；4左,字体的颜色]
//     }
//     这3个是必填参数，也同时具有layer的其他基础参数，比如time（是否定时关闭），area（设置框的宽高），shadeClose（是否点击遮罩层关闭）等。
//     ————————————————
// 版权声明：本文为CSDN博主「_阿毛」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/amao_aguai/article/details/82869224
//     layer.tips(msg, '#id',{tips: 1}，time:10000)
    function tipsceng(othis) {
        // {tips: 1}是位置//othis是传过来的这个被点击对象,其实也可以不用,而是用别的元素的id,然后提示就在别的元素那里
        layer.tips('Hi，我是tips', othis,
                            { tips: [2, '#5BC0DE'], //1-上，2-右，3-下，4-左
                            time: 1000, area: ['100px', 'auto'],}//area是宽和高
                  );
    }
    function iframe层() {
        //iframe层
        layer.open({
            type: 2,
            title: 'layer mobile页',
            shadeClose: true,
            shade: 0.8,
            area: ['380px', '90%'],//宽和高  也可以用auto
            content: './ceshi时间线.html' //iframe的url
        });
    }
    function iframe窗() {
        //iframe窗
        layer.open({
            type: 2,
            title: false,
            closeBtn: 0, //不显示关闭按钮
            shade: [0],
            area: ['340px', '215px'],
        // offset: 'auto'	默认坐标，即垂直水平居中
        // offset: '100px'	只定义top坐标，水平保持居中
        // offset: ['100px', '50px']	同时定义top、left坐标
        // offset: 't'	快捷设置顶部坐标
        // offset: 'r'	快捷设置右边缘坐标
        // offset: 'b'	快捷设置底部坐标
        // offset: 'l'	快捷设置左边缘坐标
        // offset: 'lt'	快捷设置左上角
        // offset: 'lb'	快捷设置左下角
        // offset: 'rt'	快捷设置右上角
        // offset: 'rb'	快捷设置右下角
            offset: 't', //右下角弹出
            time: 2000, //2秒后自动关闭
            anim: 2,
            content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
            end: function(){ //此处用于演示
                layer.open({
                    type: 2,
                    title: '很多时候，我们想最大化看，比如像这个页面。',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['500px', '350px'],
                    content: '//fly.layui.com/'
                });
            }
        });
    }
    function 加载层() {
        //加载层
        // var index = layer.load(0, {shade: 0.8}); //0代表加载的风格，支持0-2
        // var index = layer.load(1, {
        //     shade: [0.6,'#5BC0DE'] //0.1透明度的白色背景
        // });
        //创建加载层对象
        let loadingIndex = layer.load(2, { //icon支持传入0-2
            //time: 1000,
            shade: [0.5, 'gray'], //0.5透明度的灰色背景
            content: '加载中...',
            // 下面的函数是让   加载中...   和转圈的  分开
            success: function (layero) {
                layero.find('.layui-layer-content').css({
                    'padding-top': '39px',
                    'width': '60px'
                });
            }
        });
        //模拟关闭加载层
        setTimeout(function () {
            // layer.closeAll('loading');
            //关闭加载层  loadingIndex是上面创建的加载层对象
            layer.close(loadingIndex)
        },1800)
    }
    //loadding层
    function loadding层() {
        //loading层
        let index = layer.load(1, {
            shade: [0.5,'#fff'] //0.1透明度的白色背景
        });
        //模拟关闭loading层
        setTimeout(function () {
            // layer.closeAll('loading');
            //关闭loaddig层  index是上面创建的加载层对象
            layer.close(index)
        },1800)
    }
    //小tips
    function 小tips() {
        // layer.tips('积分列点击事件: '+JSON.stringify(obj),this,{tips: [2,'#99950f'],time:10000,closeBtn:true})
        //小tips
        layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。','#小tipsId', {
            tips: [1, '#3595CC'],// //1-上，2-右，3-下，4-左
            time: 1900
        });
    }
    function prompt提示层() {
        //prompt层
        layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
            //index其实代表了当前是底基层提示
            // alert(index);
            layer.close(index);
            layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
                // alert(index);
                layer.close(index);
                //上面循环告诉我们, 这样嵌套几层后, function的第一个参数是填入的东西
                layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
                //下面其实可以直接写ajax传入后台了
            });
        });
    }

    function tab层() {
        //tab层
        layer.tab({
            //是否允许拉伸
            resize:true,
            area: ['600px', '300px'],
            tab: [{
                title: 'TAB1',
                content: '内容1'
            }, {
                title: 'TAB2',
                content: '内容2'
            }, {
                title: 'TAB3',
                content: '内容3'
            }]
        });
    }

    //相册层
    function 相册层() {
        // {
        //     "title": "", //相册标题
        //     "id": 123, //相册id
        //     "start": 0, //初始显示的图片序号，默认0
        //     "data": [   //相册包含的图片，数组格式
        //     {
        //         "alt": "图片名",
        //         "pid": 666, //图片id
        //         "src": "", //原图地址
        //         "thumb": "" //缩略图地址
        //     }
        // ]
        // }
        //相册层  注意下面地址返回的结构必须跟上面一样才行,而且必须是get
        $.getJSON('http://127.0.0.1:80/phptest01/phpFanHuijsonCeShilayerXiangCeCeng.php?v='+new Date, function(json){
            layer.photos({
                closeBtn:1,
                //格式见API文档手册页
                photos: json
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
            });
        });
    }


</script>
</body>
</html>